<template>
	<view class="flex-col page">
		<view class="u-flex u-p-20">
			<image @click="back"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868184356219940.png"
				class="image" />

			<view class="u-flex-1 u-flex u-row-center">
				<text class="text">邀请好友</text>
			</view>
		</view>
		<view class="content">
			<view class="u-flex u-row-center w-full">
				<image class="line" :src="imgUrl+'line.png'" mode=""></image>
			</view>
			<view class="box">
				<view class="u-flex u-row-center w-full">

					<view class="flex-col">
						<view class="group_1">
							<view class="justify-center">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868192451675546.png"
									class="image_1 image_2" />
								<text class="text_1">权益</text>
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868191170947638.png"
									class="image_1 image_3" />
							</view>

							<view class="flex-row group_4">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868145957639442.png"
									class="image_4" />
								<text class="text_3">邀请者会获得平台分发的优惠券，被邀请者也会获得新人优惠券。</text>
							</view>

							<view class="flex-row group_4">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868145957639442.png"
									class="image_4" />
								<text class="text_3">邀请者会获得平台分发的优惠券，被邀请者也会获得新人优惠券。</text>
							</view>
							<view class="flex-row group_4">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868145957639442.png"
									class="image_4" />
								<text class="text_3">邀请者会获得平台分发的优惠券，被邀请者也会获得新人优惠券。</text>
							</view>
						</view>
						<view class="flex-row equal-division">
							<view class="justify-center items-center equal-division-item" @click="shareFriend">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868184469441017.png"
									class="image_8" />
								<text class="text_6">分享好友</text>
							</view>
							<view class="justify-center equal-division-item section_2" @click="show=true">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868187381037978.png"
									class="image_8" />
								<text class="text_6">分享朋友圈</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<shop-share v-model="show"></shop-share>


	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				show: false,
				imgUrl: this.$IMG_URL,
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			shareFriend() {
				console.log('用户个人信息',this.userInfo);
				// #ifdef APP-PLUS
				this.show = true;
				this.$store.commit('shareInfo', {
					title: '邀请注册',
					path: this.$WEB_URL + 'pages/index/shareRegist?userid=' + this.userInfo.id,
					image: this.$IMG_URL+'login/logo.png'
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/index/shareRegist?userid=' + this.userInfo.id
				})
				// #endif

			}
		},
	};
</script>

<style scoped lang="scss">
	.u-p-20 {
		margin-top: 60rpx;
	}

	.line {
		width: 96%;
		height: 60rpx;
	}

	.content {
		position: relative;
		margin-top: 26vh;
		display: flex;
		justify-content: center;

	}

	.box {
		position: absolute;
		top: 36rpx;
		width: 100%;
	}

	.group_4 {
		// align-items: center;
		margin-top: 70rpx;
		align-self: center;
		width: 495rpx;
	}

	.image_4 {
		margin-top: 32rpx;
		flex-shrink: 0;
		border-radius: 50%;
		width: 17rpx;
		height: 17rpx;
	}

	.equal-division-item {
		flex: 1 1 280rpx;
		padding: 19.5rpx 50.5rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		height: 80rpx;
	}

	.image_1 {
		width: 126rpx;
		height: 7rpx;
	}

	.image_8 {
		margin-top: 3.5rpx;
		width: 39.5rpx;
		height: 39.5rpx;
	}

	.text_3 {
		
		margin-left: 24rpx;
		flex: 1 1 auto;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 40rpx;
		text-align: left;
	}

	.text_6 {
		margin-left: 11rpx;
		margin-bottom: 8rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 34rpx;
		height: 34rpx;
	}

	.page {

		background-color: #ffffffff;
		background-image: url($IMG_URL+'bg.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		position: relative;

	}

	.group_1 {display: flex;
	justify-content: space-around;
	flex-direction: column;
	
        height: 800rpx;
		background-color: #ffffff;
		padding: 70rpx 76rpx;
		margin: 0 30rpx;
		z-index: 2;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		box-shadow: 2rpx 2rpx 5rpx 3rpx #ccc inset;

	}

	.equal-division {
		margin: 60rpx 32rpx 0;
	}

	.image {

		width: 18rpx;
		height: 33rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_3 {
		margin-right: 21rpx;
		margin-top: 51rpx;
	}

	.section_2 {
		margin-left: 62rpx;
	}

	.image_2 {
		margin-top: 22rpx;
	}

	.text_1 {
		margin-left: 24.5rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_3 {
		margin-left: 22.5rpx;
		margin-top: 22rpx;
	}

	.text_2 {
		margin-left: 24rpx;
		flex: 1 1 auto;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: left;
	}
</style>
